<template>
<section style="position: absolute;top: 0;left: 0;right: 0;">
  <img src="../../assets/login/logo.png" class="com_logo">
  <div class="tab_login">
    <span :class="{classA:isShow2}" @click="codeLogin()" ref="code">验证码登录</span>
    <span :class="{classA:isShow}" @click="psdLogin()" ref="psd">密码登录</span>
  </div>

  <div v-if="isShow">
  <yd-cell-group>
    <yd-cell-item>
      <span slot="left"><img src="../../assets/login/user.png" style="width: .37rem;height: .5rem;margin-right: .27rem"></span>
      <yd-input slot="right" type="tel"  :show-success-icon="false" v-model="userName" max="20" placeholder="请输入手机号"></yd-input>
    </yd-cell-item>
    <yd-cell-item>
      <span slot="left"><img src="../../assets/login/psd.png" style="width: .42rem;height: .5rem;margin-right: .22rem"></span>
      <yd-input slot="right" type="password" v-model="userPsd" placeholder="请输入密码"></yd-input>
    </yd-cell-item>
  </yd-cell-group>
  </div>

  <div v-else>
    <yd-cell-group>
      <yd-cell-item>
        <span slot="left"><img src="../../assets/login/user.png" style="width: .37rem;height: .5rem;margin-right: .27rem"></span>
        <yd-input slot="right" type="tel"   :show-success-icon="false" v-model="input3" max="20" placeholder="请输入手机号"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left"><img src="../../assets/login/robot.png" style="width: .44rem;height: .5rem;margin-right: .2rem"></span>
        <yd-input slot="right"  :show-success-icon="false" v-model="input4" max="20" placeholder="证明你不是机器人"></yd-input>
        <img slot="right" id="txtMCodeImg" :src="yanzhengImg" @click="changeImg()">
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left"><img src="../../assets/login/code.png" style="width: .42rem;height: .5rem;margin-right: .22rem"></span>
        <input type="text" slot="right" placeholder="请输入验证码" v-model="yanzhengId">
        <yd-sendcode slot="right"
                     v-model="start1"
                     @click.native="sendCode1"
                     type="warning"
        ></yd-sendcode>

      </yd-cell-item>
    </yd-cell-group>
    <span class="tip_tex">未注册将自动创建账号</span>
  </div>
  <yd-button size="large" type="danger" style="margin-top: .8rem;width: 96%;margin-left: 2%;" @click.native="loginBtn()">登录</yd-button>
  <div class="other_list">
    <span @click="forgetPsd()">忘记密码</span>
    <span @click="registerBtn()">立即注册</span>
  </div>
</section>
</template>

<script>

    export default {
        name: "loginPage",
        data(){
          return{
            userName:'',
            userPsd:'',
            isShow:false,
            isShow2:true,
            yanzhengId:'',
            input3:'',
            start1: false,
            input4:'',
            code:'',
            yanzhengImg:window.g.apiUrl+'/util/imgVerifi.do',
            pass:'',
          }
        },
      methods:{

        psdLogin(){
          this.isShow = true;
          this.isShow2 = false;
        },
        codeLogin(){
          this.isShow = false;
          this.isShow2 = true;
        },
        sendCode1() {

          if(this.input3 == ''){
            this.$dialog.notify({
              mes: '请完善手机号',
              timeout: 1500,
            });
            return;
          }

          let that = this;
          this.$dialog.loading.open('发送中...');

          this.$ajax.post(window.g.apiUrl+'/util/message.do',JSON.stringify({
            phone:this.input3,
            flag:"3"
          }))
            .then((response)=>{
              setTimeout(() => {

                that.start1 = true;
                that.$dialog.loading.close();

                if(response.data.code == 200){
                  that.$dialog.toast({
                    mes: '已发送',
                    icon: 'success',
                    timeout: 1500
                  });
                  that.code = response.data.data;
                }else{
                  that.$dialog.toast({
                    mes: '验证码发送次数过多，请稍后重试',
                    icon:'error',
                    timeout: 1500,
                  });
                }

              }, 500);


            }).catch(()=>{
          });
        },
        loginBtn(){

          let that = this;

          if(this.isShow){

            if(this.userName == ''){
              that.$dialog.notify({
                mes: '请输入手机号',
                timeout: 1500,
              });
              return;
            }
            if(this.userPsd == ''){
              that.$dialog.notify({
                mes: '请输入密码',
                timeout: 1500,
              });
              return;
            }
            that.$dialog.loading.open('登录中');
            setTimeout(()=>{
            this.$ajax.post(window.g.apiUrl+'/user/login.do',JSON.stringify({
              phoneNum:this.userName,
              pass:this.userPsd,
            })).then((response)=>{
              that.$dialog.loading.close();
              if(response.data.code == 200){
                localStorage.setItem('userid',response.data.data)
                var ua = navigator.userAgent.toLowerCase();
                if(ua.match(/MicroMessenger/i)=="micromessenger") {
                  // window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx457a0fc52bf26f73&redirect_uri' +
                  //   '=https%3A%2F%2Fwww.hotdata.xyz%2Fhtml%2Findex.html%23%2Floginback&response_type=code&scope=snsapi_userinfo&state=LOGIN#wechat_redirect';//测试环境
                  window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc196ae04865f5036&redirect_uri=https%3A%2F%2Fwww.huojudata.com%2Fhtml%2Findex.html' +
                    '%23%2Floginback&response_type=code&scope=snsapi_userinfo&state=LOGIN#wechat_redirect'//正式环境
                }else{
                  let redirectUrl = JSON.parse(sessionStorage.getItem('redirectUrl'));
                  redirectUrl != null ? that.$router.push(redirectUrl.url):that.$router.push('/index');
                  sessionStorage.removeItem('redirectUrl');
                }
                }else{
                that.$dialog.notify({
                  mes: response.data.message,
                  timeout: 1500,
                });
              }
            }).catch(()=>{
            })
            },150)
          }else{

            if(this.input3 == ''){
              that.$dialog.notify({
                mes: '请输入手机号',
                timeout: 1500,
              });
              return;
            }

            if(this.input4 == ''){
              that.$dialog.notify({
                mes: '请输入图文验证码',
                timeout: 1500,
              });
              return;
            }

            this.$ajax.post(window.g.apiUrl+'/util/isVer.do',JSON.stringify({
              code:this.input4,
            })).then((response)=>{
              if(response.data.code == 200){

                if(this.yanzhengId == ''){
                  that.$dialog.notify({
                    mes: '请输入验证码',
                    timeout: 1500,
                  });
                  return;
                }

                if(this.yanzhengId != this.code){
                  this.$dialog.notify({
                    mes: '验证码输入有误',
                    timeout: 1500,
                  });
                  return;
                }
                that.$dialog.loading.open('登录中');
                setTimeout(()=>{
                this.$ajax.post(window.g.apiUrl+'/user/codeLogin.do',JSON.stringify({
                  phoneNum:this.input3,
                  pass:this.pass,
                  channel:'1',
                })).then((response)=>{
                  that.$dialog.loading.close();
                  if(response.data.code == 200){
                    localStorage.setItem('userid',response.data.data);
                    var ua = navigator.userAgent.toLowerCase();
                    if(ua.match(/MicroMessenger/i)=="micromessenger") {
                      // window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx457a0fc52bf26f73&redirect_uri=' +
                      //   'https%3A%2F%2Fwww.hotdata.xyz%2Fhtml%2Findex.html%23%2Floginback&response_type=code&scope=snsapi_userinfo&state=LOGIN#wechat_redirect';//测试环境
                      window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc196ae04865f5036&redirect_uri=https%3A%2F%2Fwww.huojudata.com%2Fhtml%2Findex.html' +
                        '%23%2Floginback&response_type=code&scope=snsapi_userinfo&state=LOGIN#wechat_redirect'//正式环境
                    }else{
                      let redirectUrl = JSON.parse(sessionStorage.getItem('redirectUrl'));
                      redirectUrl != null ? that.$router.push(redirectUrl.url):that.$router.push('/index');
                      sessionStorage.removeItem('redirectUrl');
                    }
                  }else{
                    that.$dialog.notify({
                      mes: response.data.message,
                      timeout: 1500,
                    });
                  }

                }).catch(()=>{
                })
                },150)
              }else{
                that.$dialog.notify({
                  mes: '图文验证码错误',
                  timeout: 1500,
                });
              }
            }).catch(()=>{
            })

          }

        },
        changeImg(){
          this.$ajax.post(window.g.apiUrl+'/util/imgVerifi.do')
            .then((response)=>{
              this.yanzhengImg = response.config.url+"?t="+Date.now();
            }).catch(()=>{
          })
        },
        forgetPsd(){
          this.$router.push('/forget_psd');
        },
        registerBtn(){
          this.$router.push('/register');
        }
      },
      created(){
        for(var i=0;i<6;i++){
          this.pass+=Math.floor(Math.random()*10);
        }
      },
    }
</script>

<style scoped>

  .com_logo{
    width: 3.29rem;
    height: 1.48rem;
    margin-top: .8rem;
  }
  .tab_login{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: .8rem;
    margin-bottom: .7rem;
  }
  .tab_login span{
    height: .45rem;
  }
  .classA{
    color: red;
    border-bottom: 2px solid red;
  }
  .other_list{
    display: flex;
    justify-content: space-between;
    padding:0 .2rem;
    margin-top: .4rem;
    color: #9f9f9f;
  }
  .tip_tex{
    color: #9f9f9f;
    width: 100%;
    text-align: right;
    padding-right: .3rem;
    display: inline-block;
  }

</style>
